import React, {Component} from 'react';
import { Form, Input, Button, message } from 'antd'
import { withRouter } from 'react-router-dom'
import './register.less'
import { addUser} from "../../api/user";

@withRouter

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            formItemLayout : {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 8 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            },
            tailFormItemLayout: {
                wrapperCol: {
                    xs: {
                        span: 24,
                        offset: 0,
                    },
                    sm: {
                        span: 16,
                        offset: 8,
                    },
                },
            }
        }
    }

    onFinish = values => {
        const { password: passWord, number} = values;
        this.setState({
            loading: true
        })
        addUser({passWord,number}).then(res => {
            message.success(res.msg);
            this.props.history.push('/login');
        }).catch(err => {
            this.setState({
                loading: false
            })
        }).finally(() => {
        })
    };

    reLogin = () => {
        this.props.history.push('/login')
    }

    render() {
        return (
            <div className='register'>
                <div className='mod_form'>
                    <Form
                        name="register"
                        {...this.state.formItemLayout}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="number"
                            label="账号"
                            disabled={this.state.loading}
                            hasFeedback
                            rules={[
                                {
                                    required: true,
                                    message: '账号不能为空',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            label="密码"
                            disabled={this.state.loading}
                            rules={[
                                {
                                    required: true,
                                    message: '密码不能为空',
                                },
                            ]}
                            hasFeedback
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="confirm"
                            label="确认密码"
                            disabled={this.state.loading}
                            dependencies={['password']}
                            hasFeedback
                            rules={[
                                {
                                    required: true,
                                    message: '请确认密码',
                                },
                                ({ getFieldValue }) => ({
                                    validator(rule, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject('两次密码不一致');
                                    },
                                }),
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                        <Form.Item {...this.state.tailFormItemLayout}>
                            <Button type="primary" loading={this.state.loading} htmlType="submit">
                                注册
                            </Button>
                            <Button type="primary" className='mod_login' onClick={this.reLogin}>
                                返回登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Register;